<template>
  <basic-dialog
    width="50%"
    :title="dialogInfo.title"
    :visible="visible"
    :handleClose="handleClose"
  >
    <el-form ref="formData" :model="formData" label-width="90px">
      <el-form-item label="SKU编码：">{{ skuInfo.skuNo }}</el-form-item>
      <el-form-item label="SKU名称：">{{ skuInfo.productName }}</el-form-item>
      <el-form-item label="规格：">{{ skuInfo.spec }}</el-form-item>
      <template v-if="!isSubmitType" >
        <el-form-item label="处理人：">{{ skuInfo.submitOperName }}</el-form-item>
        <el-form-item label="不停用原因说明：" label-width="130px">
          {{ skuInfo.submitReason }}
        </el-form-item>
      </template>
      <el-form-item :label="`${dialogInfo.noteLabel}：`" :label-width="dialogInfo.labelWidth">
        <el-input
          type="textarea"
          resize="none"
          v-model.trim="formData.note"
          show-word-limit
          :placeholder="`请输入${dialogInfo.noteLabel}`"
          :autosize="{ minRows: 4 }"
          :maxlength="200"
        />
      </el-form-item>
    </el-form>
    <el-row slot="ft" type="flex" justify="end">
      <template v-if="isSubmitType">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="okLoading" @click="handleOk">提交</el-button>
      </template>
      <template v-else>
        <el-button :loading="okLoading" @click="handleAuditFailed">审核不通过</el-button>
        <el-button type="primary" :loading="okLoading" @click="handleAuditSuccessed">审核通过</el-button>
      </template>
    </el-row>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import { AUDIT_PASSED, AUDTI_REJECTED, SUBMIT_TYPE, AUDIT_TYPE } from './constants';
export default {
  components: { BasicDialog },
  props: {
    visible: Boolean,
    // 1 - 不停用原因；2 - 不停用原因审核
    dialogType: {
      type: Symbol,
      required: true
    },
    skuInfo: {
      type: Object,
      default: () => ({ skuNo: '', productName: '', spec: '' })
    },
    okLoading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        note: ''
      }
    }
  },
  watch: {
    visible (val) {
      if (!val) this.formData.note = '';
    }
  },
  computed: {
    isSubmitType () {
      return this.dialogType === SUBMIT_TYPE;
    },
    dialogInfo () {
      const Maps = {
        [SUBMIT_TYPE]: {
          title: '淘汰商品停用提醒-不停用原因',
          noteLabel: '不停用原因说明',
          labelWidth: '130px'
        },
        [AUDIT_TYPE]: {
          title: '淘汰商品停用提醒-不停用原因审核',
          noteLabel: '审核说明',
          labelWidth: '90px'
        }
      }
      return Maps[this.dialogType];
    }
  },
  methods: {
    // 移除校验结果状态
    removeValidateState () {
      this.$nextTick(() => {
        this.$refs.formData.clearValidate();
      });
    },
    handleOk () {
      this.emitResults();
    },
    handleClose () {
      this.$emit('update:visible', false);
    },
    handleAuditFailed () {
      if (!this.formData.note) return this.$message.warning('审核不通过请填写审核说明！');
      this.emitResults(AUDTI_REJECTED);
    },
    handleAuditSuccessed () {
      this.emitResults(AUDIT_PASSED);
    },
    emitResults (type) {
      this.$emit('getResults', this.formData.note, type);
    }
  }
}
</script>
<style lang="less" scoped>
.sku_show_wrap {
  margin-bottom: 20px;
}
</style>
